<template>
  <div class="login">
    <!-- 头部标题 -->
    <van-nav-bar class="mynav" title="登录" />
    <van-form @submit="onSubmit">
      <!-- 手机号 & 验证码 -->
      <van-cell-group>
        <van-field
          :rules="rules.mobile"
          v-model="user.mobile"
          placeholder="请输入手机号"
        >
          <template #left-icon>
            <i class="iconfont icon-iphone"></i>
          </template>
        </van-field>
        <van-field
          :rules="rules.code"
          v-model="user.code"
          placeholder="请输入验证码"
        >
          <template #button>
            <van-button
              class="codeBtn"
              type="default"
              round
              color="#ededed"
              size="small"
              >发送验证码</van-button
            >
          </template>
          <template #left-icon>
            <i class="iconfont icon-lock"></i>
          </template>
        </van-field>
      </van-cell-group>
      <!-- 登录按钮 -->
      <div class="loginbtn">
        <van-button
          type="info"
          size="large"
          :loading="isLoading"
          loading-type="spinner"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { apiLogin } from '@/api/use.js'
// 导入 操作 local 的方法
import { localSet } from '@/utils/mylocal.js'
export default {
  data () {
    return {
      // 用户信息
      user: {
        mobile: '13911111199',
        code: '246810'
      },
      // 验证规则
      rules: {
        mobile: [
          //  验证是否为空
          { required: true, message: '请输入手机号', trigger: 'onBlur' },
          // 验证是否匹配正则
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确的手机号',
            trigger: 'onBlur'
          }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'onBlur' },
          { pattern: /^\d{6}$/, message: '验证码长度为6', trigger: 'onBlur' }
        ]
      },
      // 设置登录按钮的加载状态
      isLoading: false
    }
  },
  methods: {
    async onSubmit () {
      // 判断是否正在请求数据
      if (this.isLoading === true) {
        // 说明正在请求数据，不应该再次请求
        return
      }
      try {
        // 将加载状态设置为 true
        this.isLoading = true
        // 将它们提交到服务器
        const res = await apiLogin(this.user)
        // 将加载状态设置为 false
        this.isLoading = false
        // 判断请求的路由
        console.log(this.$route)
        if (this.$route.path === '/login') {
          // 正常登录： 跳转到首页
          this.$router.push('/home')
        } else {
          // 验证登录： 返回到上一个页面
          this.$router.go(-1)
        }
        // 将 token 保存到 localstorage 中
        localSet('token', res.data.data)
      } catch (error) {
        // 将加载状态设置为 false
        this.isLoading = false
        // 提示登录失败信息
        this.$toast.fail('您输入的手机号或者验证码有误')
      }
    }
  }
}
</script>

<style lang="less" scoped>
// /deep/ 深度选择器：如果希望 scoped 中的样式影响子组件可以使用：尝试选择器
.login {
  .mynav {
    background-color: #3e9df8;
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
  }
  .codeBtn {
    /deep/ .van-button__text {
      color: #999;
    }
  }
  .loginbtn {
    margin: 20px;
  }
}
</style>
